<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>医院排队叫号系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .department-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .department-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .doctor-card {
            margin-bottom: 15px;
        }
        .queue-info {
            font-size: 0.9em;
            color: #666;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">医院排队叫号系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="doctor/">医生工作台</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                <!-- 排队表单 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">患者排队</h5>
                    </div>
                    <div class="card-body">
                        <form id="queueForm">
                            <div class="mb-3">
                                <label for="patientName" class="form-label">患者姓名</label>
                                <input type="text" class="form-control" id="patientName" name="patientName" required>
                            </div>
                            <div class="mb-3">
                                <label for="patientPhone" class="form-label">联系电话</label>
                                <input type="tel" class="form-control" id="patientPhone" name="patientPhone" required>
                            </div>
                            <div class="mb-3">
                                <label for="departmentId" class="form-label">就诊科室</label>
                                <select class="form-select" id="departmentId" name="departmentId" required>
                                    <option value="">请选择科室</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="doctorId" class="form-label">就诊医生</label>
                                <select class="form-select" id="doctorId" name="doctorId" required>
                                    <option value="">请先选择科室</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">立即排队</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <!-- 当前排队信息 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">当前排队信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="queueStatus">
                            <!-- 排队状态将通过JavaScript动态填充 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排队成功提示模态框 -->
    <div class="modal fade" id="queueSuccessModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">排队成功</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您的排队号码：<span id="queueNumber" class="fw-bold"></span></p>
                    <p>请留意叫号信息，保持电话畅通。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            const queueSuccessModal = new bootstrap.Modal(document.getElementById('queueSuccessModal'));
            
            // 加载科室列表
            function loadDepartments() {
                $.get('api/departments', function(departments) {
                    let options = '<option value="">请选择科室</option>';
                    departments.forEach(function(dept) {
                        options += `<option value="\${dept.id}">\${dept.name}</option>`;
                    });
                    $('#departmentId').html(options);
                });
            }

            // 根据科室加载医生列表
            $('#departmentId').change(function() {
                const deptId = $(this).val();
                if (deptId) {
                    $.get(`api/doctors?departmentId=\${deptId}`, function(doctors) {
                        let options = '<option value="">请选择医生</option>';
                        doctors.forEach(function(doctor) {
                            options += `<option value="\${doctor.id}">\${doctor.name} - \${doctor.title}</option>`;
                        });
                        $('#doctorId').html(options);
                    });
                } else {
                    $('#doctorId').html('<option value="">请先选择科室</option>');
                }
            });

            // 更新排队状态
            function updateQueueStatus() {
                const doctorId = $('#doctorId').val();
                if (doctorId) {
                    $.get(`api/queue/status/\${doctorId}`, function(status) {
                        let html = `
                            <p><strong>当前就诊：</strong>\${status.current || '暂无'}</p>
                            <p><strong>等待人数：</strong>\${status.waiting || 0}人</p>
                            <p><strong>预计等待时间：</strong>\${status.estimatedWait || 0}分钟</p>
                        `;
                        $('#queueStatus').html(html);
                    });
                }
            }

            // 提交排队表单
            $('#queueForm').submit(function(e) {
                e.preventDefault();
                const formData = {
                    patientName: $('#patientName').val(),
                    patientPhone: $('#patientPhone').val(),
                    departmentId: $('#departmentId').val(),
                    doctorId: $('#doctorId').val()
                };

                $.ajax({
                    url: 'api/queue',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(response) {
                        if (response.success) {
                            $('#queueNumber').text(response.queueNumber);
                            queueSuccessModal.show();
                            $('#queueForm')[0].reset();
                            updateQueueStatus();
                        } else {
                            alert('排队失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('系统错误，请稍后重试');
                    }
                });
            });

            // 初始化
            loadDepartments();
            
            // 当选择医生时更新排队状态
            $('#doctorId').change(updateQueueStatus);
            
            // 定期更新排队状态
            setInterval(updateQueueStatus, 10000);
        });
    </script>
</body>
</html>